<template>
  <h1>插值语法ref</h1>
  <h4>message:{{ message }} - isShow:{{ isShow }}</h4>
  <!-- 2.是一个表达式 -->
  <h4>{{ counter * 10 }}</h4>
  <h4>{{ message.split(' ').join('-') }}</h4>
  <h4>{{ isShow ? '三元运算符' : '' }}</h4>
  <h4>{{ getReverseMessage() }}</h4>
  <h2>reactive</h2>
  <h4>obj.name :{{ obj.name }}</h4>
  <h4>obj.age:{{ obj.age }}</h4>
  <h4>name:{{ name }}</h4>
  <h4>age:{{ age }}</h4>
  <h4>height:{{ obj.height }}</h4>
  <button @click="toggle">切换控制显示</button>
  <button @click="changeRef">改变ref</button>
  <button @click="changeReactive">改变reactive</button>
  <hr />
  <p>defineOptions-counter:{{ counter }}</p>
</template>

<!-- <script>
export default {
  name: 'page-day1',
  data() {
    return {
      message: 'Hello World',
      counter: 100,
      isShow: true
    }
  },
  methods: {
    getReverseMessage() {
      return this.message.split(' ').reverse().join(' ')
    },
    toggle() {
      this.isShow = !this.isShow
      console.log('this.isShow: ', this.isShow)
    }
  }
}
</script> -->
<script setup>
defineOptions({
  name: 'page-day1',
  data() {
    return {
      counter: 100
    }
  },
  created() {
    console.log('created')
  }
})
import { ref, reactive, toRefs } from 'vue'
const message = ref('Hello World')
const counter = ref(100)
const isShow = ref(true)
let obj = reactive({
  name: '张三',
  age: 18
})
// toRefs可以将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref
const { name, age } = toRefs(obj)
function toggle() {
  isShow.value = !isShow.value
  fn()
}
const fn = function () {
  console.log('fn')
}
function getReverseMessage() {
  const str = message.value.split(' ').reverse().join(' ')
  return str
}
function changeRef() {
  message.value = 'Hello Vue3'
}
function changeReactive() {
  // obj.name = '李四'
  // obj.age = 20
  // 不能直接修改reactive,将失去响应
  // obj = { name: '李四', age: 20 }
  obj = Object.assign(obj, { name: '李四', age: 20, height: 1.88 })
}
</script>

<style lang="scss" scoped></style>
